import { App } from 'vue';
import { defineRule, configure } from 'vee-validate';
import {
  required,
  email,
  min,
  between,
  confirmed,
  max,
  is,
  one_of,
  digits,
  integer,
} from '@vee-validate/rules';
import { localize } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json';
import { setLocale as setDynamicFormLocale } from '@vee-validate/i18n';
import { useAppSettingStoreWithOut } from '@/store/module/useAppSettingStore';
import { ElForm } from 'element-plus';
import 'element-plus/es/components/form/style/css';
import { userAgreement } from '@/dynamicForm/userAgreement';
import DynamicInput from '@/components/common/dynamicForm/DynamicInput.vue';
import DynamicCheckbox from '@/components/common/dynamicForm/DynamicCheckbox.vue';
import DynamicRadio from '@/components/common/dynamicForm/DynamicRadio.vue';
import DynamicSelect from '@/components/common/dynamicForm/DynamicSelect.vue';
import DynamicCaptcha from '@/components/common/dynamicForm/DynamicCaptcha.vue';
import DynamicSmsCode from '@/components/common/dynamicForm/DynamicSmsCode.vue';
import DynamicSelectSub from '@/components/common/dynamicForm/DynamicSelectSub.vue';
import DynamicDataPicker from '@/components/common/dynamicForm/DynamicDataPicker.vue';

export const setupDynamicForm = (app: App) => {
  defineRule('required', required);
  defineRule('email', email);
  defineRule('min', min);
  defineRule('max', max);
  defineRule('between', between);
  defineRule('confirmed', confirmed);
  defineRule('is', is);
  defineRule('one_of', one_of);
  defineRule('userAgreement', userAgreement);
  defineRule('digits', digits);
  defineRule('integer', integer);

  configure({
    generateMessage: localize({
      en,
      zh_CN,
    }),
  });

  const appSettingStore = useAppSettingStoreWithOut();
  setDynamicFormLocale(appSettingStore.getLocale);

  app.use(ElForm);
  app.component('DynamicInput', DynamicInput);
  app.component('DynamicCheckbox', DynamicCheckbox);
  app.component('DynamicRadio', DynamicRadio);
  app.component('DynamicSelect', DynamicSelect);
  app.component('DynamicCaptcha', DynamicCaptcha);
  app.component('DynamicSmsCode', DynamicSmsCode);
  app.component('DynamicSelectSub', DynamicSelectSub);
  app.component('DynamicDataPicker', DynamicDataPicker);
};
